<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <!-- 表格 -->
    <div class="table">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column
          prop="name"
          label="类型"
          align="center"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="value"
          label="数量"
          align="center"
          width="200"
        ></el-table-column>
        <el-table-column prop="address" label="操作" align="center" width="80">
          <template slot-scope="scope">
            <el-button type="text" size="small">操作</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 饼状图 -->
    <div class="bing" style="width: 600px; height: 400px" ref="bing_main"></div>
  </div>
</template>

<script>
import { getTable } from "@/api/table";
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
import * as echarts from "echarts";
export default {
  name: "Dashboard",
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    this.getTable();
  },
  mounted() {},
  methods: {
    // 获取表格数据
    getTable() {
      let obj = {
        token: getToken(),
        tel: localStorage.getItem("tel"),
      };
      getTable(obj).then((response) => {
        let arr = [
          {
            value: response.await_review_topics_number * 1,
            name: "待审核题目",
          },
          {
            value: response.reviewed_topics_number * 1,
            name: "已审核题目",
          },
        ];
        this.tableData = arr;
        this.getBing();
      });
    },
    // 饼状图
    getBing() {
      let myChart = echarts.init(this.$refs.bing_main);
      let option = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: this.tableData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    },
  },
  computed: {
    ...mapGetters(["name"]),
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 0.625rem;
  box-sizing: border-box;
  .table {
    width: 30.1rem;
    margin: 0 auto;
  }
  .bing {
    margin: 0 auto;
  }
}
// .dashboard {
//   &-container {
//     margin: 30px;
//   }
//   &-text {
//     font-size: 30px;
//     line-height: 46px;
//   }
// }
</style>
